import React from 'react';
/* 验证码组件 */
// 引入axios
import axios from 'axios';
// 引入函数组件hook
import { useEffect, useState, forwardRef } from 'react'
// 引入校验参数类型
import Pts from 'prop-types'
const Captcha = forwardRef((props, ref) => {
    // 定义验证码图片地址数据
    let [imgurl, setimgurl] = useState('')
    // 定义获取验证码图片方法
    let getcaptcha = () => {
        axios.get('https://reactapi.iynn.cn/captcha/api/math').then(res => {
            //console.log(res);
            if (res.status == 200) {
                // 验证码图片地址赋值
                setimgurl(res.data.img)
                // 将后端返回验证码所携带的唯一的key保存在父组件中，这样可以避免验证码组件复用时，第二个key覆盖第一个key
                // 可通过子传父的方式将key传递给父组件
                // savekey为父组件中的方法
                props.savekey(res.data.key)
            }
        })
    }
    // 借用useEffect，达到只执行一次的效果
    useEffect(() => {
        getcaptcha()
    }, [])
    // 点击更换验证码，也就是重新获取
    let loadfn = () => {
        getcaptcha()
    }
    return (
        <div>
            <img src={imgurl} onClick={loadfn} width={props.w} height={props.h} />
        </div>
    );
})

// 参数类型
Captcha.propTypes = {
    savekey: Pts.func,
    w: Pts.number,
    h: Pts.number
}

// 默认值
Captcha.defaultProps = {
    w: 140,
    h: 40
}
export default Captcha;
